<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动执行管理 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/activity-execution-management.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">业务管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">邀约活动</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">活动执行</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3 class="sidebar-title">客户管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="customer-list.html" class="menu-link">
                            <i class="fas fa-users"></i>
                            <span>客户档案</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-user-plus"></i>
                            <span>新增客户</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>标签管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3 class="sidebar-title">业务管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="invitation-management.html" class="menu-link">
                            <i class="fas fa-calendar-check"></i>
                            <span>邀约活动</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>线路产品</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">活动执行管理</h1>
                <div class="activity-info">
                    <div class="activity-basic">
                        <span class="activity-name">桂林山水3日游分享会</span>
                        <span class="activity-status status-ongoing">进行中</span>
                    </div>
                    <div class="activity-details">
                        <span class="activity-time">2025年7月25日 14:30-16:30</span>
                        <span class="activity-venue">市民文化中心 · 多功能厅A</span>
                    </div>
                </div>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" onclick="goBackToActivity()">
                    <i class="fas fa-arrow-left"></i>
                    返回活动
                </button>
                <button class="btn btn-primary" id="quick-checkin-btn">
                    <i class="fas fa-qrcode"></i>
                    快速签到
                </button>
            </div>
        </header>

        <!-- 执行阶段导航 -->
        <section class="execution-nav-section">
            <div class="execution-nav">
                <button class="nav-step active" data-step="preparation" onclick="switchExecutionStep('preparation')">
                    <div class="step-icon">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">活动准备</div>
                        <div class="step-subtitle">准备清单检查</div>
                    </div>
                </button>
                <button class="nav-step" data-step="checkin" onclick="switchExecutionStep('checkin')">
                    <div class="step-icon">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">现场签到</div>
                        <div class="step-subtitle">客户签到管理</div>
                    </div>
                </button>
                <button class="nav-step" data-step="process" onclick="switchExecutionStep('process')">
                    <div class="step-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">活动过程</div>
                        <div class="step-subtitle">过程记录跟踪</div>
                    </div>
                </button>
            </div>
        </section>

        <!-- 活动准备阶段 -->
        <section class="execution-content" id="preparation-content">
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">活动前准备清单</h2>
                    <div class="preparation-progress">
                        <div class="progress-circle">
                            <svg width="60" height="60">
                                <circle cx="30" cy="30" r="25" stroke="#e5e5ea" stroke-width="4" fill="none"/>
                                <circle cx="30" cy="30" r="25" stroke="#34c759" stroke-width="4" fill="none" 
                                        stroke-dasharray="157" stroke-dashoffset="47" class="progress-bar"/>
                            </svg>
                            <span class="progress-text">70%</span>
                        </div>
                        <div class="progress-info">
                            <div class="progress-title">完成度</div>
                            <div class="progress-detail">7/10项已完成</div>
                        </div>
                    </div>
                </div>

                <div class="checklist-container">
                    <div class="checklist-categories">
                        <!-- 场地设备类 -->
                        <div class="checklist-category">
                            <h3 class="category-title">
                                <i class="fas fa-building"></i>
                                场地设备
                            </h3>
                            <div class="checklist-items">
                                <div class="checklist-item completed" data-item="venue">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">场地确认</div>
                                        <div class="item-description">确认活动场地预订和布置</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-24 16:30</span>
                                            <span class="item-responsible">负责人：张经理</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('venue')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="checklist-item completed" data-item="equipment">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">设备调试</div>
                                        <div class="item-description">投影仪、音响、麦克风等设备测试</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-25 13:00</span>
                                            <span class="item-responsible">负责人：李技术员</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('equipment')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="checklist-item pending" data-item="signage">
                                    <label class="checkbox-item">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">指示牌布置</div>
                                        <div class="item-description">活动指示牌、签到台标识等</div>
                                        <div class="item-meta">
                                            <span class="item-deadline">截止时间：07-25 14:00</span>
                                            <span class="item-responsible">负责人：王助理</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn primary" title="标记完成" onclick="markChecklistComplete('signage')">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('signage')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 物料准备类 -->
                        <div class="checklist-category">
                            <h3 class="category-title">
                                <i class="fas fa-box"></i>
                                物料准备
                            </h3>
                            <div class="checklist-items">
                                <div class="checklist-item completed" data-item="materials">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">宣传资料</div>
                                        <div class="item-description">产品手册、宣传单页、视频资料准备</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-24 18:00</span>
                                            <span class="item-responsible">负责人：市场部</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('materials')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="checklist-item completed" data-item="refreshments">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">茶点准备</div>
                                        <div class="item-description">茶水、点心、水果等茶点安排</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-25 12:30</span>
                                            <span class="item-responsible">负责人：行政部</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('refreshments')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="checklist-item completed" data-item="gifts">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">礼品准备</div>
                                        <div class="item-description">客户伴手礼、纪念品准备</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-25 10:00</span>
                                            <span class="item-responsible">负责人：采购部</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('gifts')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 人员安排类 -->
                        <div class="checklist-category">
                            <h3 class="category-title">
                                <i class="fas fa-users"></i>
                                人员安排
                            </h3>
                            <div class="checklist-items">
                                <div class="checklist-item completed" data-item="staff">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">工作人员到位</div>
                                        <div class="item-description">主持人、接待员、技术员等人员安排</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-25 13:30</span>
                                            <span class="item-responsible">负责人：人事部</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('staff')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="checklist-item completed" data-item="checkin-table">
                                    <label class="checkbox-item">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">签到表准备</div>
                                        <div class="item-description">客户签到表、座位安排表等</div>
                                        <div class="item-meta">
                                            <span class="item-time">完成时间：07-25 14:00</span>
                                            <span class="item-responsible">负责人：客服部</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('checkin-table')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="checklist-item pending urgent" data-item="emergency-plan">
                                    <label class="checkbox-item">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="item-content">
                                        <div class="item-title">应急预案确认</div>
                                        <div class="item-description">突发情况处理方案、联系方式确认</div>
                                        <div class="item-meta">
                                            <span class="item-deadline urgent">截止时间：07-25 14:15</span>
                                            <span class="item-responsible">负责人：安全员</span>
                                        </div>
                                    </div>
                                    <div class="item-actions">
                                        <button class="action-btn primary" title="标记完成" onclick="markChecklistComplete('emergency-plan')">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="action-btn" title="查看详情" onclick="viewChecklistDetail('emergency-plan')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最后确认 -->
                <div class="final-confirmation">
                    <div class="confirmation-header">
                        <h3 class="confirmation-title">
                            <i class="fas fa-clipboard-check"></i>
                            最后确认
                        </h3>
                        <div class="countdown-timer">
                            <span class="countdown-label">距离活动开始：</span>
                            <span class="countdown-time" id="countdown-time">00:15:23</span>
                        </div>
                    </div>
                    
                    <div class="confirmation-content">
                        <div class="confirmation-stats">
                            <div class="stat-item">
                                <div class="stat-number">98</div>
                                <div class="stat-label">确认参加</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">85</div>
                                <div class="stat-label">预计到场</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">23°C</div>
                                <div class="stat-label">当前气温</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">晴</div>
                                <div class="stat-label">天气状况</div>
                            </div>
                        </div>

                        <div class="confirmation-actions">
                            <button class="btn btn-outline" onclick="sendLastReminder()">
                                <i class="fas fa-bell"></i>
                                发送最后提醒
                            </button>
                            <button class="btn btn-primary" onclick="startActivity()" id="start-activity-btn">
                                <i class="fas fa-play"></i>
                                开始活动
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 现场签到阶段 -->
        <section class="execution-content" id="checkin-content" style="display: none;">
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">现场签到管理</h2>
                    <div class="checkin-stats">
                        <div class="stat-card compact">
                            <div class="stat-number" id="checkin-count">45</div>
                            <div class="stat-label">已签到</div>
                        </div>
                        <div class="stat-card compact">
                            <div class="stat-number" id="expected-count">98</div>
                            <div class="stat-label">预计参加</div>
                        </div>
                        <div class="stat-card compact">
                            <div class="stat-number" id="checkin-rate">45.9%</div>
                            <div class="stat-label">签到率</div>
                        </div>
                    </div>
                </div>

                <div class="checkin-container">
                    <!-- 快速签到区域 -->
                    <div class="quick-checkin-section">
                        <div class="quick-checkin-header">
                            <h3>快速签到</h3>
                            <div class="checkin-methods">
                                <button class="method-btn active" data-method="search">
                                    <i class="fas fa-search"></i>
                                    搜索签到
                                </button>
                                <button class="method-btn" data-method="scan">
                                    <i class="fas fa-qrcode"></i>
                                    扫码签到
                                </button>
                                <button class="method-btn" data-method="manual">
                                    <i class="fas fa-plus"></i>
                                    手动签到
                                </button>
                            </div>
                        </div>

                        <div class="checkin-input-area" id="search-checkin">
                            <div class="search-box large">
                                <i class="fas fa-search search-icon"></i>
                                <input type="text" placeholder="搜索客户姓名或手机号进行签到" class="search-input" id="checkin-search">
                                <div class="search-suggestions" id="search-suggestions"></div>
                            </div>
                        </div>

                        <div class="checkin-input-area" id="scan-checkin" style="display: none;">
                            <div class="qr-scanner">
                                <div class="scanner-area">
                                    <i class="fas fa-qrcode scanner-icon"></i>
                                    <div class="scanner-text">请将客户二维码对准扫描区域</div>
                                    <button class="btn btn-primary" onclick="startQRScanner()">启动扫描器</button>
                                </div>
                            </div>
                        </div>

                        <div class="checkin-input-area" id="manual-checkin" style="display: none;">
                            <div class="manual-form">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label class="form-label">客户姓名</label>
                                        <input type="text" class="form-input" placeholder="请输入客户姓名">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">手机号码</label>
                                        <input type="tel" class="form-input" placeholder="请输入手机号码">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label class="form-label">陪同人员</label>
                                        <input type="text" class="form-input" placeholder="如有陪同人员请填写">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">座位安排</label>
                                        <select class="form-select">
                                            <option value="">自动分配</option>
                                            <option value="A1">A区第1排</option>
                                            <option value="A2">A区第2排</option>
                                            <option value="B1">B区第1排</option>
                                            <option value="B2">B区第2排</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="btn btn-primary">确认签到</button>
                            </div>
                        </div>
                    </div>

                    <!-- 签到列表 -->
                    <div class="checkin-list-section">
                        <div class="list-header">
                            <h3>签到记录</h3>
                            <div class="list-filters">
                                <button class="filter-btn active" data-filter="all">全部</button>
                                <button class="filter-btn" data-filter="checked">已签到</button>
                                <button class="filter-btn" data-filter="absent">未到场</button>
                            </div>
                        </div>

                        <div class="checkin-table-container">
                            <table class="checkin-table">
                                <thead>
                                    <tr>
                                        <th>客户信息</th>
                                        <th>签到时间</th>
                                        <th>陪同人员</th>
                                        <th>座位安排</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="checkin-table-body">
                                    <!-- 签到记录行 -->
                                    <tr class="checkin-row checked-in" data-customer-id="1">
                                        <td class="customer-info">
                                            <div class="customer-detail">
                                                <div class="customer-avatar">张</div>
                                                <div class="customer-data">
                                                    <div class="customer-name">张大爷</div>
                                                    <div class="customer-phone">138****8001</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="checkin-time">
                                            <div class="time-display">14:25</div>
                                            <div class="time-status early">提前到达</div>
                                        </td>
                                        <td class="companion">
                                            <span class="companion-info">张大妈（老伴）</span>
                                        </td>
                                        <td class="seat-assignment">
                                            <span class="seat-number">A1-05</span>
                                        </td>
                                        <td class="checkin-status">
                                            <span class="status-badge status-checked">已签到</span>
                                        </td>
                                        <td class="actions">
                                            <button class="action-btn" title="编辑信息" onclick="editCheckinInfo(1)">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="取消签到" onclick="cancelCheckin(1)">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </td>
                                    </tr>

                                    <tr class="checkin-row checked-in" data-customer-id="2">
                                        <td class="customer-info">
                                            <div class="customer-detail">
                                                <div class="customer-avatar">李</div>
                                                <div class="customer-data">
                                                    <div class="customer-name">李大妈</div>
                                                    <div class="customer-phone">139****8002</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="checkin-time">
                                            <div class="time-display">14:32</div>
                                            <div class="time-status normal">正常到达</div>
                                        </td>
                                        <td class="companion">
                                            <span class="companion-empty">无</span>
                                        </td>
                                        <td class="seat-assignment">
                                            <span class="seat-number">A2-03</span>
                                        </td>
                                        <td class="checkin-status">
                                            <span class="status-badge status-checked">已签到</span>
                                        </td>
                                        <td class="actions">
                                            <button class="action-btn" title="编辑信息" onclick="editCheckinInfo(2)">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="取消签到" onclick="cancelCheckin(2)">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </td>
                                    </tr>

                                    <tr class="checkin-row absent" data-customer-id="3">
                                        <td class="customer-info">
                                            <div class="customer-detail">
                                                <div class="customer-avatar">王</div>
                                                <div class="customer-data">
                                                    <div class="customer-name">王先生</div>
                                                    <div class="customer-phone">137****8003</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="checkin-time">
                                            <span class="time-empty">未签到</span>
                                        </td>
                                        <td class="companion">
                                            <span class="companion-empty">-</span>
                                        </td>
                                        <td class="seat-assignment">
                                            <span class="seat-reserved">B1-08</span>
                                        </td>
                                        <td class="checkin-status">
                                            <span class="status-badge status-absent">未到场</span>
                                        </td>
                                        <td class="actions">
                                            <button class="action-btn primary" title="手动签到" onclick="manualCheckin(3)">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            <button class="action-btn" title="联系客户" onclick="contactCustomer(3)">
                                                <i class="fas fa-phone"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 活动过程阶段 -->
        <section class="execution-content" id="process-content" style="display: none;">
            <div class="content-section">
                <div class="section-header">
                    <h2 class="section-title">活动过程记录</h2>
                    <div class="process-info">
                        <div class="process-time">
                            <span class="time-label">活动进行时间：</span>
                            <span class="time-value" id="activity-duration">01:25:30</span>
                        </div>
                        <div class="process-status">
                            <span class="status-badge status-ongoing">进行中</span>
                        </div>
                    </div>
                </div>

                <div class="process-container">
                    <!-- 实时状况 -->
                    <div class="realtime-status">
                        <div class="status-cards">
                            <div class="status-card">
                                <div class="card-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-number">45</div>
                                    <div class="card-label">实际参与人数</div>
                                </div>
                            </div>
                            <div class="status-card">
                                <div class="card-icon">
                                    <i class="fas fa-smile"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-number">良好</div>
                                    <div class="card-label">活动氛围</div>
                                </div>
                            </div>
                            <div class="status-card">
                                <div class="card-icon">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-number">28</div>
                                    <div class="card-label">感兴趣客户</div>
                                </div>
                            </div>
                            <div class="status-card">
                                <div class="card-icon">
                                    <i class="fas fa-handshake"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-number">5</div>
                                    <div class="card-label">意向强烈</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 活动记录 -->
                    <div class="activity-records">
                        <div class="records-header">
                            <h3>活动记录</h3>
                            <button class="btn btn-primary" onclick="addActivityRecord()">
                                <i class="fas fa-plus"></i>
                                添加记录
                            </button>
                        </div>

                        <div class="records-timeline">
                            <div class="timeline-item">
                                <div class="timeline-time">14:30</div>
                                <div class="timeline-content">
                                    <div class="timeline-title">活动正式开始</div>
                                    <div class="timeline-description">主持人开场致辞，介绍活动流程</div>
                                    <div class="timeline-meta">记录人：张经理</div>
                                </div>
                            </div>

                            <div class="timeline-item">
                                <div class="timeline-time">14:45</div>
                                <div class="timeline-content">
                                    <div class="timeline-title">产品介绍环节</div>
                                    <div class="timeline-description">专业导游开始介绍桂林山水3日游线路，客户反应热烈</div>
                                    <div class="timeline-meta">记录人：李导游</div>
                                </div>
                            </div>

                            <div class="timeline-item current">
                                <div class="timeline-time">15:20</div>
                                <div class="timeline-content">
                                    <div class="timeline-title">互动问答环节</div>
                                    <div class="timeline-description">客户积极提问，主要关心价格、住宿条件和安全问题</div>
                                    <div class="timeline-meta">记录人：王客服</div>
                                </div>
                            </div>

                            <div class="timeline-item future">
                                <div class="timeline-time">15:45</div>
                                <div class="timeline-content">
                                    <div class="timeline-title">优惠政策介绍</div>
                                    <div class="timeline-description">预计介绍特殊优惠政策和限时优惠</div>
                                    <div class="timeline-meta">计划环节</div>
                                </div>
                            </div>

                            <div class="timeline-item future">
                                <div class="timeline-time">16:15</div>
                                <div class="timeline-content">
                                    <div class="timeline-title">现场咨询服务</div>
                                    <div class="timeline-description">一对一客户咨询和签约服务</div>
                                    <div class="timeline-meta">计划环节</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 客户反应记录 -->
                    <div class="customer-reactions">
                        <div class="reactions-header">
                            <h3>客户反应记录</h3>
                            <div class="quick-actions">
                                <button class="quick-btn" onclick="markCustomerInterested()">
                                    <i class="fas fa-heart"></i>
                                    标记感兴趣
                                </button>
                                <button class="quick-btn" onclick="markCustomerIntention()">
                                    <i class="fas fa-handshake"></i>
                                    标记有意向
                                </button>
                            </div>
                        </div>

                        <div class="reactions-content">
                            <div class="reaction-categories">
                                <div class="reaction-category">
                                    <h4 class="category-title">
                                        <i class="fas fa-heart text-orange"></i>
                                        感兴趣客户 (28人)
                                    </h4>
                                    <div class="customer-tags">
                                        <div class="customer-tag" data-customer="1">
                                            <span class="customer-name">张大爷</span>
                                            <span class="interest-note">询问价格详情</span>
                                        </div>
                                        <div class="customer-tag" data-customer="2">
                                            <span class="customer-name">李大妈</span>
                                            <span class="interest-note">关心住宿条件</span>
                                        </div>
                                        <div class="customer-tag" data-customer="5">
                                            <span class="customer-name">赵阿姨</span>
                                            <span class="interest-note">询问出发时间</span>
                                        </div>
                                        <!-- 更多感兴趣客户 -->
                                    </div>
                                </div>

                                <div class="reaction-category">
                                    <h4 class="category-title">
                                        <i class="fas fa-handshake text-green"></i>
                                        意向强烈客户 (5人)
                                    </h4>
                                    <div class="customer-tags">
                                        <div class="customer-tag high-intention" data-customer="3">
                                            <span class="customer-name">王先生</span>
                                            <span class="interest-note">准备现场报名</span>
                                        </div>
                                        <div class="customer-tag high-intention" data-customer="8">
                                            <span class="customer-name">陈女士</span>
                                            <span class="interest-note">要求预留位置</span>
                                        </div>
                                        <!-- 更多高意向客户 -->
                                    </div>
                                </div>

                                <div class="reaction-category">
                                    <h4 class="category-title">
                                        <i class="fas fa-question-circle text-blue"></i>
                                        问题客户 (12人)
                                    </h4>
                                    <div class="customer-tags">
                                        <div class="customer-tag" data-customer="4">
                                            <span class="customer-name">刘大爷</span>
                                            <span class="interest-note">担心身体吃不消</span>
                                        </div>
                                        <div class="customer-tag" data-customer="6">
                                            <span class="customer-name">孙阿姨</span>
                                            <span class="interest-note">价格偏高</span>
                                        </div>
                                        <!-- 更多有问题客户 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框：添加活动记录 -->
    <div class="modal-overlay" id="activity-record-modal">
        <div class="modal medium">
            <div class="modal-header">
                <h3 class="modal-title">添加活动记录</h3>
                <button class="modal-close" onclick="closeActivityRecordModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form class="activity-record-form">
                    <div class="form-group">
                        <label class="form-label">记录时间</label>
                        <input type="time" class="form-input" id="record-time" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">事件标题</label>
                        <input type="text" class="form-input" placeholder="请输入事件标题" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">详细描述</label>
                        <textarea class="form-textarea" rows="4" placeholder="请详细描述发生的事件和客户反应"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">记录人员</label>
                        <select class="form-select">
                            <option value="">选择记录人员</option>
                            <option value="张经理">张经理</option>
                            <option value="李导游">李导游</option>
                            <option value="王客服">王客服</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeActivityRecordModal()">取消</button>
                <button class="btn btn-primary" onclick="saveActivityRecord()">保存记录</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/activity-execution-management.js"></script>
</body>
</html>